<template>
  <div>
    <el-card class="box-card margin_30">
      <div slot="header" class="clearfix">
        <el-button type="primary" size="small" @click="openAdd">新增</el-button>
      </div>
      <div>
        <el-table
          :data="brandList"
          border
        >
          <el-table-column
            type="index"
            label="序号"
            fixed="left"
            width="50"
            align="center"
          />
          <el-table-column
            label="品牌名称"
            align="center"
            width="250"
            prop="name"
          />
          <el-table-column
            label="展示状态"
            align="center"
            width="200"
            prop=""
          >

            <template slot-scope="scope">
              是否展示:
              <el-switch
                v-model="scope.row.showStatus"
                active-color="#409eff"
              />
            </template>
          </el-table-column>

          <el-table-column
            label="logo"
            width="300"
            align="center"
          >
            <template v-slot="scope">
              <img style="width:100px;height:100px" :src="scope.row.logo" alt="">
            </template>
          </el-table-column>
          <el-table-column
            label="专区大图"
            align="center"
            width="200"
            prop="bigPic"
          >
            <template v-slot="scope">
              <img style="width:100px;height:100px" :src="scope.row.bigPic" alt="">
            </template>
          </el-table-column>
          <el-table-column
            label="品牌故事"
            align="center"
            width="200"
            prop="brandStory"
          />
          <el-table-column
            label="创建时间"
            align="center"
            width="200"
            prop="createTime"
          />
          <el-table-column
            label="排序"
            align="center"
            width="200"
            prop="sort"
          />
          <el-table-column
            label="产品评论数量"
            align="center"
            width="200"
            prop="productCommentCount"
          />
          <el-table-column
            label="产品数量"
            align="center"
            width="200"
            prop="productCount"
          />
          <el-table-column
            label="是否品牌制造商"
            align="center"
            width="200"
            prop="factoryStatus"
          />
          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="update(scope.row.id)">编辑</el-link>
              <el-link type="danger" @click="del(scope.row.id)">删除</el-link>
            </template>

          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-dialog title="品牌详情" :visible.sync="dialogFormVisible" width="70%">
      <el-form :model="brandInfo" size="mini">
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="品牌名称">
              <el-input v-model="brandInfo.name" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="首字母">
              <el-input v-model="brandInfo.firstLetter" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="排序">
              <el-input v-model="brandInfo.sort " autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="产品数量">
              <el-input v-model="brandInfo.productCount " autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="是否展示">
              <el-switch
                v-model="brandInfo.showStatus"
                active-color="#409eff"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="是否为品牌制造商">
              <el-switch
                v-model="brandInfo.factoryStatus"
                active-color="#409eff"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="上传专区大图">
              <el-upload
                class="avatar-uploader"
                action="http://leju.bufan.cloud/lejuAdmin/material/uploadFileOss"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :headers="getToken"
              >
                <img v-if="brandInfo.bigPic" style="width:150px;height:150" :src="brandInfo.bigPic" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="上传LOGO">
              <el-upload
                class="avatar-uploader"
                action="http://leju.bufan.cloud/lejuAdmin/material/uploadFileOss"
                :show-file-list="false"
                :on-success="handleAvatarSuccess1"
                :headers="getToken"
              >
                <img v-if="brandInfo.logo" style="width:150px;height:150px" :src="brandInfo.logo" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findBrandByPage, addBrand, updateBrand, delBrand } from '@/api/commodityManage/brandManage/index'
import { getToken } from '@/utils/myAuth'
import mixins from '@/mixins/index'
export default {
  name: 'VueAdminTemplateMasterIndex',

  mixins: [mixins],
  data() {
    return {
      isAdd: '',
      getToken: {
        token: getToken()
      },
      dialogFormVisible: false,
      brandList: [],
      brandInfo: {
        'bigPic': '',
        'brandStory': '',
        'createTime': '',
        'factoryStatus': 0,
        'firstLetter': '',
        'id': '',
        'logo': '',
        'modifyTime': '',
        'name': '',
        'productCommentCount': '',
        'productCount': '',
        'showStatus': 0,
        'sort': ''
      }
    }
  },

  created() {
    this.init()
  },

  mounted() {

  },

  methods: {
    del(id) {
      delBrand(id).then(res => {
        this.init()
      })
    },
    openAdd() {
      this.dialogFormVisible = true
      this.isAdd = true
    },
    update(id) {
      this.brandInfo = this.brandList.find(ele => {
        return ele.id === id
      })
      console.log(this.brandInfo)
      if (this.brandInfo.factoryStatus === '是') {
        this.brandInfo.factoryStatus = true
      } else {
        this.brandInfo.factoryStatus = false
      }
      this.dialogFormVisible = true
      this.isAdd = false
    },
    add() {
      if (this.isAdd) {
        this.brandInfo.showStatus = this.brandInfo.showStatus ? 1 : 0
        this.brandInfo.factoryStatus = this.brandInfo.factoryStatus ? 1 : 0
        console.log(this.brandInfo)
        addBrand(this.brandInfo).then(res => {
          this.init()
        })
      } else {
        console.log(this.brandInfo)
        this.brandInfo.showStatus = this.brandInfo.showStatus ? 1 : 0
        this.brandInfo.factoryStatus = this.brandInfo.factoryStatus ? 1 : 0
        updateBrand(this.brandInfo).then(res => {
          this.init()
        })
      }
    },
    handleAvatarSuccess1(response) {
      this.brandInfo.logo = response.data.fileUrl
    },
    handleAvatarSuccess(response) {
      this.brandInfo.bigPic = response.data.fileUrl
    },
    init() {
      findBrandByPage(this.start, this.limit).then(res => {
        res.data.rows.forEach(ele => {
          ele.showStatus = !!ele.showStatus
          ele.factoryStatus = ele.factoryStatus ? '是' : '不是'
        })
        this.brandList = res.data.rows
      })
    }
  }
}
</script>

<style scoped>

</style>
